<template>
  <h3>watchEffect函数的演示 (打开调试器查看日志消息)</h3>

  <hr>
  <button @click="sum++">修改总和</button>
  <span>和为: {{sum}}</span>
  <br>
  <button @click="msg += '@'">修改消息</button>
  <span>消息: {{msg}}</span>
  <br>

  <hr>
  <div>员工信息:</div>
  <div class="single">姓名: {{staff.name}}</div>
  <div class="single">年龄: {{staff.age}}</div>
  <div class="single">爱好: {{staff.hobby}}</div>
  <div class="single">薪水: {{staff.job.job1.salary}}K</div>

  <button @click="staff.name += '~'">修改姓名</button>
  <button @click="staff.age++">修改年龄</button>
  <button @click="staff.hobby[1] += '%'">修改爱好</button>
  <button @click="staff.job.job1.salary++">涨薪</button>

  <hr>
  <p>
    注意:<br>
    1. watch的特性<br>
    &nbsp;&nbsp;&nbsp;&nbsp;1). 首次加载不会监听，只会被监听数据发生变化时才监听到（惰性）。<br>
    &nbsp;&nbsp;&nbsp;&nbsp;2). 可以拿到新的值以前的值。<br>
    &nbsp;&nbsp;&nbsp;&nbsp;3). 可以同时监听多个数据的变化。<br>
    2. watchEffect的特性<br>
    &nbsp;&nbsp;&nbsp;&nbsp;1). 首次加载就会监听。<br>
    &nbsp;&nbsp;&nbsp;&nbsp;2). 只能拿到最新的值。<br>
    &nbsp;&nbsp;&nbsp;&nbsp;3). 不需要指定监听的数据，组件初始化的时候就会执行一次用以收集依赖，而后收集到的依赖发生变化，这个回调才会再次执行。<br>
    3. watchEffect有点像computed函数: 但computed注重的是计算出来的值(回调函数的返回值),所以必须有返回值; 而watchEffect注重的是过程(回调函数的函数体),所以不用写返回值.<br>
    &nbsp;&nbsp;&nbsp;&nbsp;当然, watchEffect本身会返回一个终止函数,可以用来终止监视.<br>
    4. 官方文档<a href="https://v3.cn.vuejs.org/api/computed-watch-api.html#computed">Computed 与 watch</a><br>
  </p>
</template>

<script>
import { ref, reactive, toRef, watch, watchEffect } from 'vue'

export default {
  setup() {

    let sum = ref(0)
    let msg = ref('vue3学习')

    let staff = reactive({
      name: '南宫无人',
      age: 20,
      job: {
        job1: {
          salary: 10
        }
      },
      hobby: ['Football', 'Learn']
    })

    function getStaffBigAge() {
      return staff.age * 10
    }

    watchEffect( ()=> {
      console.log('watchEffect监视到数据的变化了:', 'sum=', sum.value, 'salary=', staff.job.job1.salary)
      console.log('watchEffect可以监视函数中的引用: age*10=', getStaffBigAge())
    })
    
    return { sum, msg, staff }
  },
}
</script>

<style scoped>

h3 {
  text-align: center;
}

.single {
  margin-top: 5px;
}

</style>